<template>
	<view style="height: 750rpx">
		
	</view>
</template>

<script>
	export default {
	
		data() {
			return {}
		},
		async mounted() {
			this.$refs.chart.init(echarts, chart => {
				let upColor = '#ec0000';
				let upBorderColor = '#8A0000';
				let downColor = '#00da3c';
				let downBorderColor = '#008F28';
				let data0 = splitData([
					['2013/1/24', 72, 65, 50, 38],
					['2013/1/25', 70, 67, 50, 38],
					['2013/1/28', 72, 63, 50, 38],
					['2013/1/29', 78, 65, 50, 38],
					['2013/1/30', 77, 61, 50, 38],
					['2013/1/31', 76, 60, 50, 38],
					['2013/2/1', 73, 59, 50, 38],
					['2013/2/4', 71, 58, 50, 38],
					['2013/2/5', 72, 56, 50, 38],
					['2013/2/6', 78, 57, 50, 38],
					['2013/2/7', 79, 58, 50, 38],
					['2013/2/8', 82, 64, 50, 38],
					['2013/2/18', 81, 65, 50, 38],
					['2013/2/19', 79, 63, 50, 38],
					['2013/2/20', 76, 61, 50, 38],
					['2013/2/21', 74, 60, 50, 38],
					['2013/2/22', 75, 64, 50, 38],
					['2013/2/25', 75, 63, 50, 38],
					['2013/2/26', 76, 67, 50, 38],
					['2013/2/27', 72, 65, 50, 38],
					['2013/2/28', 70, 64, 50, 38],
					['2013/3/1', 69, 63, 50, 38],
					['2013/3/4', 68, 62, 50, 38],
					['2013/3/5', 73, 61, 50, 38],
					['2013/3/6', 72, 59, 50, 38],
					['2013/3/7', 70, 58, 50, 38],
					['2013/3/8', 75, 61, 50, 38],
					['2013/3/11', 78, 63, 50, 38],
					['2013/3/12', 77, 62, 50, 38],
					['2013/3/13', 76, 65, 50, 38]
				]);

				function splitData(rawData) {
					const categoryData = [];
					const values = [];
					for (var i = 0; i < rawData.length; i++) {
						categoryData.push(rawData[i].splice(0, 1)[0]);
						values.push(rawData[i]);
					}
					return {
						categoryData: categoryData,
						values: values
					};
				}

				function calculateMA(dayCount) {
					let data = data0
					var result = [];
					for (var i = 0, len = data.values.length; i < len; i++) {
						let item = data.values[i]
						if (!item[dayCount]) {
							result.push('-');
							continue;
						}
						result.push(item[dayCount]);
					}
					return result;
				}



				let option = {
					title: {
						text: '',
						left: 0
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross'
						}
					},
					legend: {
						data: ['二两母蟹', '二两公蟹', '一两母蟹', '一两公蟹'],
						textStyle: {
							fontSize: 12
						}
					},
					grid: {
						top: '20%',
						left: '10%',
						right: '10%',
						bottom: '20%'
					},
					xAxis: {
						type: 'category',
						data: data0.categoryData,
						boundaryGap: false,
						axisLine: {
							onZero: false
						},
						splitLine: {
							show: false
						},
						min: 'dataMin',
						max: 'dataMax'
					},
					yAxis: {
						scale: true,
						splitArea: {
							show: true
						}
					},
					dataZoom: [{
							type: 'inside',
							start: 50,
							end: 100
						},
						{
							show: true,
							type: 'slider',
							top: '90%',
							start: 50,
							end: 100
						}
					],
					series: [{
							name: '二两母蟹',
							type: 'line',
							data: calculateMA(0),
							smooth: true,
							lineStyle: {
								opacity: 0.5
							}
						},
						{
							name: '二两公蟹',
							type: 'line',
							data: calculateMA(1),
							smooth: true,
							lineStyle: {
								opacity: 0.5
							}
						},
						{
							name: '一两母蟹',
							type: 'line',
							data: calculateMA(2),
							smooth: true,
							lineStyle: {
								opacity: 0.5
							}
						},
						{
							name: '一两公蟹',
							type: 'line',
							data: calculateMA(3),
							smooth: true,
							lineStyle: {
								opacity: 0.5
							}
						}
					]
				}
				chart.setOption(option)
			});
		}
	}
</script>